{extend name="$index_style_layout" /}

<!--SEO相关-->
{block name="head_title"}{$info.title}{/block}
{block name="head_keword"}{$info.keywords?:$info.title}  {$s_info.name} {/block}
{block name="head_description"}{:get_word(del_html($info['content']),300)}{/block}

{block name="body_content"}
<div class="BigsortBox">
	<div class="BoxIn">
		<ul>
			<ol><div><span>
{php}$menu_choose=config('system_dirname')?config('system_dirname'):'index';{/php}
{volist name="'wap'|get_web_menu" id="rs"}
			<a href="{$rs.url}" {if ($rs['activate']==$menu_choose||$rs['activate']==$menu_choose.'-'.$fid)}class="ck"{/if}>{$rs.name}</a>
{/volist}</span></div></ol>
			<li><span>更多</span></li>
		</ul>
	</div>
</div>
<!--弹出更多导航菜单-->
<div class="MoreSorts">
	<div class="BackBox" onClick="HiddenMoreSorts()"></div>
{volist name="$fid|get_sort=###,'brother'" id="vo"}
<dl {if $fid==$key}class="ck"{/if}>
			<dt><a href="{:urls('index',['fid'=>$key])}">{$vo}</a><span></span></dt>
					{if count(get_sort($key,'name','sons'))>1}
					<dd>
{notempty name=":get_sort($key,'name','sons')"}
			{volist name=":get_sort($key,'name','sons')" id="vs"}
					<a href="{:urls('index',['fid'=>$key])}">{$vs}</a>
			{/volist}				
	{/notempty}
	</dd>
	{/if}
</dl>
			{/volist}
	<div class="exit"><span onClick="HiddenMoreSorts()">关闭</span></div>
</div>
<script type="text/javascript">
<!--
$('.MoreSorts dl dt span').click(function(){
	var thisobj=$(this).parent().parent();
	thisobj.siblings('dl').removeClass('ck');
	if(thisobj.hasClass('ck')){
		thisobj.removeClass('ck');
	}else{
		thisobj.addClass('ck');
	}
});
function HiddenMoreSorts(){
	$('.MoreSorts').fadeOut();
}
$('.BigsortBox .BoxIn ul li').click(function(){
	var scrollTopH=parseInt($(window).scrollTop());
	$('.MoreSorts').css({'top':scrollTopH+'px'});
	$('.MoreSorts').fadeIn();
});
//统计总宽度
//var mysortBoxW=0;
//$('.BigsortBox ul ol div a').each(function(){
	//mysortBoxW+=$(this).width();
//});
var mysortBoxW=$('.BigsortBox ul ol div span').width()+30;
$('.BigsortBox ul ol div').width(mysortBoxW);
var myScroll; 
myScroll = new IScroll('.BigsortBox ul ol', { scrollX: true, scrollY: false, mouseWheel: true,preventDefault: false,preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|LI)$/ } });
//-->
</script>
<link rel="stylesheet" href="__STATIC__/index/toutiao/article.css">
<link rel="stylesheet" href="__STATIC__/index/toutiao/waplist.css">
<div class="ArticleContBox">
	<div class="MainInfos">
{include file="../cms/content/gz" /}
		<div class="title">{$info.title}</div>
		<div class="infos">
			<span><i class="glyphicon glyphicon-time"></i> {:date("Y-m-d H:i:s",$info.create_time)}</span>
			<span><i class="si si-eye"></i> {$info.view}</span>
			<span onclick="add_fav({$id})"> <li class="fa fa-fw fa-heart"></li>收藏</span>
			<span class="manage_topic"> <li class="fa fa-cogs"></li> 管理</span>
			{include file="index@common/manage_btn" /} 
		</div>
		<div class="ShowContent">
			{$info.content}
 <!----------音乐播放器开始-------->
<link rel="stylesheet" href="__STATIC__/libs/jplayer/css/style.css"/>
<style type="text/css">
#voice{
    height:300px;
    width:100%;
    margin:0 auto;
}
 </style>
<div id="voice"></div>
<script src="__STATIC__/libs/jplayer/ttw-clarity-player.js?3"></script>
<script src="__STATIC__/libs/jplayer/yepnope.js"></script>
<script type="text/javascript">
var is_in_weixin = false;
var clarity;
$(function () {
        var myPlaylist = [
		/*
            {
                mp3:'{$info['voice_url'][0]['url']}',
                duration:'2:21',
                cover:'{$info.picurl|default="/public/static/libs/jplayer/css/images/bg.jpg"}',
                title:'{$info.title}',
                artist:'{$info.uid|get_user_name}',
                background:'',
            },
		*/
{volist name="$info['voice_url']" id="rs"}
{php}$rs['title']||$rs['title']=$info['title'].'(第'.$i.'段)';{/php}
			{
                mp3:"{$rs['url']}",
                duration:'2:21',
                cover:'{$info.picurl|default="/public/static/libs/jplayer/css/images/bg.jpg"}',
                title:'{$rs.title}',
                artist:'{$info.uid|get_user_name}',
                background:'',
				next_topic:false,
            },
{/volist}

{volist name=":fun('content@next_more',$info,3)" id="rs"}
{php}$array=json_decode($rs['voice_url'],true);$voice_url=tempdir($array[0]['url']);{/php}
			{
                mp3:'{$voice_url}',
                duration:'3:55',
                cover:"{:tempdir($rs.picurl?:'/public/static/libs/jplayer/css/images/bg.jpg')}",
                title:'{$rs.title}',
                artist:'{$rs.uid|get_user_name}',
                background:'',
				next_topic:true,
            },
{/volist}
			 
        ];
		
        clarity = $('#voice').ttwClarityPlayer(myPlaylist,{
				jPlayer:{
					supplied:'mp3',
					errorAlerts:true,	
					autoPlay:true,				
					warningAlerts:true,
					consoleAlerts:true,
					smoothPlayBar:true,
					timeupdate:function (e) {
						var time = parseInt(e.jPlayer.status.currentTime);
						console.log(time);
						if(typeof(api_player_time)=='function'){
							api_player_time(time);
						}
					},
					play:function(){
						if(typeof(api_player_play)=='function'){
							api_player_play();
						}
					},
					pause:function(){
						if(typeof(api_player_pause)=='function'){
							api_player_pause();
						}
					},
					ended:function() {
						if(typeof(api_player_ended)=='function'){
							api_player_ended();
						}
					},
					ready: function (e) {
						if(typeof(api_player_ready)=='function'){
							api_player_ready();
						}
						//$(this).jPlayer("pause",5);
					},
					error:function(event){
						if(typeof(api_player_error)=='function'){
							api_player_error();
						}
						//$(".jp-next").trigger("click");
					},
				}
			});

		
		document.addEventListener("WeixinJSBridgeReady",function(){
			clarity.play();
			play_url();
			is_in_weixin=true;
		});
		setTimeout(function(){
			if(is_in_weixin==false){
				clarity.play();
				play_url();
			}
		}, 2000 );
        
		//$('#voice-size-picker').on('click', 'li', function(){
        //    $('#voice').attr('data-size', $(this).data('size'));
        //    clarity.manageLayout();
        //});
});
</script>
<!------------音乐播放器结束---------->
		</div>
<!----音频列表开始---->
<style type="text/css">
.more_list{
	margin:10px 0 10px 0;
}
.more_list .list{
	line-height:34px;
	color:#fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.more_list .list em{
	color:#333;
}
.more_list .list a{
	background:#eee;
	color:#333;
	padding:4px 9px 4px 10px;
	font-size:14px;
}
.more_list .list .choose{
	font-weight:bold;
	color:#f60;
}
.more_list .list .fav_ck{
	color:#999;
	font-size:13px;
}

.total_price{
	margin:10px 0 10px 0;
	background:#eee;
	text-align:center;
	color:#333;
	font-size:15px;
	padding:10px 0 10px 0;
	border-radius:5px;
	display:none;
}
.total_price span{color:#f30; margin-left:5px; margin-right:5px;}
.total_price .buy{ background:#f60; color:#fff; padding:5px 10px; border-radius:5px;}
.total_price a{
	color:#f30;
}
.total_price a:hover{
	color:red;
}
</style>


{if $info.price>0&&count($info.voice_url)>1}
<div class="total_price">本内容全包价只需<span>{$info.price}</span>元，比单节购买更划算<br><a href="javascript:" data-money="{$info.price}" class="buy">点击购买</a></div>
{elseif $info.price>0 /}
<div class="total_price">本内容收费<span>{$info.price}</span>元<br><a href="javascript:" data-money="{$info.price}" class="buy">点击购买</a></div>
{/if}

		<div class="more_list" style="{:count($info.voice_url)<2?'display:none;':''}">
			{volist name="$info.voice_url" id="rs"}
				{php}$rs['title']||$rs['title']=$info['title'].'(第'.$i.'节)';{/php}
				<div class="list"><em>{$i}、</em><a {if $i==1}class="choose"{/if} href="javascript:;" onclick="change_play({$key},$(this))"><i class="fa fa-play"></i> {$rs.title}</a>
				<em class="fav fa fa-star-o" onclick="add_fav({$id},{$key})">点击收藏</em>
				<em class="money fa fa-lock">免费</em>
				</div>
			{/volist}
		</div>

<!----音频列表结束---->

<!--用到的相关JS-->
{include file="content/voice_inc"}
{include file="content/common_inc"}

	<a href="{:urls('fav/index')}"><div style="margin:auto;margin-top:10px;background:#eee;color:#f30;font-size:15px;text-align:center;width:100px;line-height:30px;border-radius:5px;">
			我的足迹
		</div></a>
	</div>
<!--显示自定义字段内容 field="picurl,title,content,keywords" 就是过滤掉不在里边重复显示的字段-->
  	<div class="OtherInfos">
{qb:showpage field="picurl,title,content,keywords"}
		<div class="SideBox">
			<div class="tag"><span>{$rs.title}</span></div>
			<div class="cont">{$rs.value}
			</div>
		</div>
{/qb:showpage}
	</div>

	<!--引用评论-->
	{qb:comment name="commentwap01" rows='5' status="1"}
		{include file="content/comment" /}
	{/qb:comment}
	<div class="ShowMoreInfos">
		<div class="head"><i class="si si-book-open"></i> 更多阅读</div>
		<div class="ListMoreInfos">
<div class="ListConts">
{qb:listpage name="news_list_page_listdata01" type="cms" rows="10" order="list"}
{if ( count($rs['picurls'])>2 )}
<div class="ListMorpic">
<div class="title"><a href="{$rs.url}">{$rs.title}</a></div>
<a href="{$rs.url}"><ul>
<a href="{$rs.url}">
{volist name="$rs.picurls" id="pic"}
				{if ($i<4)}
	<li><span><img src="{$pic.picurl}" style="max-width: 100%; max-height: 100%;"></span></li>
{/if}
{/volist}
</a>
</ul>
</a>
<dl class="moreinfo"><dt>浏览:<span>{$rs.view}</span>次 评论:<span>{:fun('comment@total',$rs['id'],'cms')}</span>条</dt><dd>{$rs.create_time|date="Y-m-d",###}</dd></dl>
</div>	
{elseif ( $rs['picurl']!='' ) /}
<ul class="pic_word">
	<ol><a href="{$rs.url}"><span><img src="{$rs.picurl}"></span></a></ol>
	<li><div class="title"><a href="{$rs.url}">{$rs.title}</a></div>
<dl class="moreinfo"><dt>浏览:<span>{$rs.view}</span>次 评论:<span>{:fun('comment@total',$rs['id'],'cms')}</span>条</dt><dd>{$rs.create_time|date="Y-m-d",###}</dd></dl>
</li>
</ul>
{else /}
<ul class="pic_word">
	<li><div class="title"><a href="{$rs.url}">{$rs.title}</a></div>
	<p>{$rs.content|get_word=94}</p>
<dl class="moreinfo"><dt>浏览:<span>{$rs.view}</span>次 评论:<span>{:fun('comment@total',$rs['id'],'cms')}</span>条</dt><dd>{$rs.create_time|date="Y-m-d",###}</dd></dl>
</li>
</ul>
{/if}
{/qb:listpage} 

	</div>
<script type="text/javascript">
var Mpage = 1;
//显示更多
function ShowMoreList(){
	Mpage++;
	$.get('{qb:list_url name="news_list_page_listdata01" /}'+Mpage,function(res){
		if(res.code==0){
			if(res.data==''){
				layer.msg("已经显示完了！",{time:500});
			}else{
				$('.ListConts').append(res.data);
				scroll_get = true;  //这一行仅仅是匹配滚动显示更多.如果没使用滚动特效,可以删除
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}

//滚动显示更多
var scroll_get = true;	//做个标志,不要反反复复的加载
$(document).ready(function () {
	$(window).scroll(function () {
		if (scroll_get==true &&  (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
			scroll_get = false;
			layer.msg('内容加截中,请稍候',{time:1000});
			ShowMoreList();
		}
	});
});

</script>
		</div>
	</div>
</div>
<!-- 微信分享 -->
{include file="index@share"/}
{/block}